<template>
    <div>
        <!-- 搜索栏 -->
        <el-row>
            <el-col :span="6">
            </el-col>
            <el-col :span="4">
                <el-input v-model="searchForm.type" placeholder="根据类型搜索" :style="{ width: '200px' }"></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model="searchForm.question" placeholder="根据问题搜索" :style="{ width: '200px' }"></el-input>
            </el-col>
            <el-col :span="5" style="display: flex; align-items: center;">
                <el-button type="primary" @click="search()" style="margin-right: -10px;">搜索</el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="primary" @click="openAddDialog">新增</el-button>
            </el-col>
        </el-row>

        <!-- 新增对话框 -->
        <el-dialog :visible.sync="addDialogVisible" title="新增" @close="resetForm">
            <!-- 新增表单 -->
            <!-- 根据你的实体类属性来设计表单 -->
            <el-form ref="form" :model="form" label-width="80px">
                <!-- 表单项 -->
                <el-form-item label="类型" prop="type">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="问题" prop="question">
                    <el-input v-model="form.question"></el-input>
                </el-form-item>

                <!-- 其他表单项根据实体类属性添加 -->

                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="addData">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 表格 -->
        <el-table :data="formList">
            <!-- 表格列根据实体类属性添加 -->
            <el-table-column label="类型" prop="type">
                <!-- 可根据实际需要添加样式或其他配置 -->
            </el-table-column>
            <!-- Question列 -->
            <el-table-column label="问题" prop="question">
                <!-- 可根据实际需要添加样式或其他配置 -->
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="openEditDialog(scope.row)">修改</el-button>
                    <el-button type="danger"  @click="deleteData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>
  
<script>

import { getQuestion, getQuestionList, saveQuestion, modQuestion, delQuestion, queryQuestion } from '@/api/Question';

export default {
    name: "question",
    data() {
        return {
            addDialogVisible: false,
            userId:0,
            searchForm:{},
            form: {
                id:0,
                userId:0,
                type: '',
                question: '',
            },
            formList: [
                // 初始化表格数据
            ],
        };
    },
    created() {
        let userId = sessionStorage.getItem("userId");
        if (userId != undefined) {
            this.userId = userId;
            this.getQuestionLists();
        }
    },
    methods: {
        search() {
            this.searchForm.userId = this.userId;
            queryQuestion(this.searchForm).then(res=>{
                if(res.data.code==200){
                    this.formList = res.data.data;
                    this.searchForm={};
                }
            })
        },
        openAddDialog() {
            this.resetForm();
            this.addDialogVisible = true;
        },
        resetForm() {
            this.form = {};
        },
        addData() {
            // 处理新增逻辑
            // 示例代码，你需要根据具体情况修改
            this.form.userId = this.userId;
            if (this.form.id == undefined) {
                saveQuestion(this.form).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                        this.resetForm();
                        this.addDialogVisible = false;
                        this.getQuestionLists();
                    }
                })
            } else {
                modQuestion(this.form).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.resetForm();
                        this.addDialogVisible = false;
                        this.getQuestionLists();
                    }
                })
            }

        },
        openEditDialog(row) {
            this.resetForm();
            getQuestion(row.id).then(res => {
                this.form = res.data.data;
            })
            this.addDialogVisible = true;
        },
        deleteData(row) {
            delQuestion(row.id).then(res => {
                if (res.data.code == 200) {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    this.getQuestionLists();
                    }
                }
            })
        },
        // 其他方法
        getQuestionLists(){
            getQuestionList(this.userId).then(res => {
                            if (res.data.code == 200) {
                                this.formList = res.data.data;
                            }
                        })
        }
    },
};
</script>
  
<style>
/* 样式可以根据需要添加 */
</style>
  